<template>
  <div class="auth">
    <gl-breadcrumb class="mb15"
                   text="权限管理"></gl-breadcrumb>
    <div class="main">
      <el-button type="primary"
                 @click="openAdd"
                 icon="el-icon-plus">添加</el-button>
      <div class="table">
        <gl-table :columns='list'
                  :data="lists"
                  class="gl-table"
                  @button="changeButton">
        </gl-table>
      </div>
      <gl-pagination :total='totals'
                     class="page"
                     :curr="curr"
                     :size="limits"
                     @callback='changePage'></gl-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="showAuth"
               class=""
               @close='closeDialog'>
      <span slot="title"
            style="fontSize:14px;">{{num==1?'编辑权限':'添加权限'}}</span>
      <div class="orderform">

        <gl-form :form='form'
                 :form-label='formLabel'
                 :must="must"
                 :rule='rule'
                 ref='form'
                 @removeImg="removeImg"
                 @change="formSelectChange"
                 @upload="getPath">
          <el-cascader slot="cascader"
                       :options="parentList"
                       v-model="form.pid"
                       :props="props"
                       filterable
                       change-on-select
                       :show-all-levels="false"
                       @change='formSelectChange'></el-cascader>
        </gl-form>
      </div>
      <span slot="footer">
        <el-button @click="showAuth = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitadmin">确 定</el-button>
      </span>
    </el-dialog>
    <gldelbtn :show="isShow"
              :text='text'
              @cancel="canceled"
              @determine='defineCallback'></gldelbtn>
  </div>
</template>

<script>
export default {
  name: 'Auth',
  components: {},
  data() {
    return {
      list: [
        { label: '编号', prop: 'id' },
        { label: '名称', prop: 'title' },
        { label: '图标', prop: 'icon', type: 'image', class: 'icon' },
        { label: '规则', prop: 'name' },
        { label: '描述', prop: 'content', type: 'textarea' },
        { label: '状态', prop: 'show' },
        { label: '操作', prop: '', btns: ['编辑', '删除'] }
      ],
      lists: [],
      showAuth: false, // 控制弹窗
      form: {
        status: 1
      },
      formLabel: [
        {
          label: '权限名称:',
          prop: 'title',
          inputType: 'text',
          placeholder: '请输入'
        },
        {
          label: '图标:',
          prop: 'icon',
          type: 'upload',
          limit: '1'
        },
        {
          label: '权限规则:',
          prop: 'name',
          inputType: 'text',
          placeholder: '请输入'
        },
        {
          label: '所属父级:',
          prop: 'pid',
          slot: 'cascader'
        },
        {
          label: '状态:',
          prop: 'show',
          radio: [{ label: '显示', value: 1 }, { label: '隐藏', value: 2 }]
        },
        {
          label: '描述:',
          prop: 'content',
          type: 'textarea',
          text: 'ueditor',
          placeholder: '请输入'
        }
      ],
      must: ['title', 'name'],
      rule: {
        pid: [{ required: true, message: '请选择所属父级', trigger: 'change' }]
      },
      num: '',
      isShow: false,
      text: '',
      totals: '',
      curr: 1,
      limits: 10,
      id: '',
      parentList: [],
      props: {
        value: 'id',
        label: 'title'
      },
      all_icon: ''
    }
  },
  computed: {},
  watch: {
    num() {
      if (this.num != 1) {
        this.form = { show: 1 }
      }
    },
    showAuth(val) {
      if (val) {
        this.getParent()
      } else {
        this.$refs.form.resetFields()
      }
    }
  },
  methods: {
    // 操作
    changeButton(val) {
      this.id = val.row.id
      if (val.index == 0) {
        // console.log('编辑')
        this.all_icon = val.row.short_icon
        this.showAuth = true
        this.num = 1
        let new_form = Object.assign({}, val.row)
        new_form.show = new_form.show == '正常' ? 1 : 2
        if (!new_form.pid) {
          new_form.pid = [0]
        } else {
          let arr = new_form.auth_path.split(',').map(Number)
          if (arr.length > 1) {
            arr.splice(arr.length - 1, 1)
          }
          new_form.pid = arr
        }
        this.form = new_form
      } else {
        // console.log('删除')
        this.isShow = true
        this.text = val.row.title
      }
    },
    // 添加
    openAdd() {
      this.num = ''
      this.$nextTick(() => {
        this.form = { show: 1 }
        this.$refs.form && this.$refs.form.resetFields()
      })
      this.showAuth = true
    },
    // 分页
    changePage(val) {
      this.curr = val.curr
      this.limits = val.size
      this.getAuto()
    },
    // 权限列表
    getAuto() {
      let params = {
        is_new: 1,
        curr: this.curr,
        limits: this.limits
      }
      this.http
        .$post('system/api/auth_list', params, { loading: true })
        .then(res => {
        //   console.log(res)
          this.totals = res.total
          let arr = res.list
          arr.map(val => {
            if (val.show == 1) {
              val.show = '正常'
            } else {
              val.show = '禁用'
            }
          })
          this.lists = arr
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 父级
    getParent() {
      this.http
        .$post('system/api/auth_pid_list', {
          is_new: 1
        })
        .then(res => {
          let arr = res
          let obj = {
            id: 0,
            title: '/'
          }
          arr.splice(0, 0, obj)
          this.parentList = arr
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 提交
    submitadmin() {
      if (this.$refs.form.validate()) {
        if (this.num == 1) {
          this.subEdit()
        } else {
          this.subAdd()
        }
      }
    },
    // 新建提交
    subAdd() {
      let params = {
        is_new: 1,
        title: this.form.title,
        icon: this.all_icon,
        name: this.form.name,
        pid: this.form.pid != '' ? this.form.pid[this.form.pid.length - 1] : '',
        show: this.form.show,
        content: this.form.content,
        auth_path: this.form.pid.join(',')
      }
      this.http
        .$post('system/api/auth_add', params)
        .then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.showAuth = false
          this.getAuto()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 编辑提交
    subEdit() {
      let params = {
        is_new: 1,
        id: this.id,
        title: this.form.title,
        icon: this.all_icon,
        name: this.form.name,
        pid: this.form.pid != '' ? this.form.pid[this.form.pid.length - 1] : '',
        show: this.form.show,
        content: this.form.content,
        auth_path: this.form.pid.join(',')
      }
      this.http
        .$post('system/api/auth_edit', params, { del: false })
        .then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.showAuth = false
          this.getAuto()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 上传路径
    getPath(val, res) {
      //   console.log(val, res)
      if (res == 'icon') {
        this.all_icon = val.savepath
      }
    },
    removeImg(val, item) {
      this.all_icon = ''
    },
    // 验证码确定
    defineCallback(code, vCode) {
      if (vCode == code) {
        // console.log('删除成功')
        this.http
          .$post('system/api/auth_edit', {
            id: this.id,
            del: 0
          })
          .then(res => {
            // console.log(res);
            this.curr = 1
            this.getAuto()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
        this.isShow = false
      } else {
        this.$message.error('验证码不正确')
      }
    },
    // 关闭
    canceled() {
      this.isShow = false
    },
    formSelectChange(val) {
      console.log(val)
    }
  },
  created() {
    this.getAuto()
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}

/deep/ .edui-default .edui-toolbar {
  line-height: 0;
}
.gl-table {
  /deep/ .icon {
    width: 40px;
    height: 40px;
  }
}
.auth {
  .main {
    // width: 918px;
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 20px;

    .ipt {
      width: 196px;
      padding-right: 20px;
    }

    .table {
      padding-top: 20px;
    }
    .page {
      padding-bottom: 40px;
    }
  }
}
</style>